<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>资料设置</title>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.5/lib/index.css">
		<link rel="stylesheet" href="../css/global.css">
		<!-- <link rel="stylesheet" href="../css/creategroup.css"> -->
		<link rel="stylesheet" href="../css/groupSet.css">
		<script src="../js/flexble.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@2.5/lib/vant.min.js"></script>
		<script type="text/javascript" src="../sdk/webimSDK3.1.2.js"></script>
		<script type="text/javascript" src="../js/WebIMConfig.js"></script>
		<script type="text/javascript" src="../js/webconn.js"></script>
		<script type="text/javascript" src="../utils/login.js"></script>
		<script type="text/javascript" src="../js/localstorage.js"></script>
	</head>
	<body>
		<div id="bigbox" class="friendDetailBox" v-if="bigboxshow">
			<div class="fixedtop">
				<div class="getBack">
					<van-button class="arrowbox" type="default" @click="back">
						<img src="../img/back.png">
					</van-button>
				</div>
			</div>
			<div class="setBtnbox">
				<div class="setmemberList">
					<div v-if="isgroupowner" class="memberbox" @click="addmemfunc">
						<img class="memberava" src="../img/addm.png">
						<p>添加</p>
					</div>
					<div v-if="isgroupowner" class="memberbox" @click="delmember">
						<img class="memberava" src="../img/reducem.png">
						<p>{{delmes}}</p>
					</div>
					<div class="memberbox" v-for="(item,index) in setmemberList" :key="index" @click="memberfunc(item)">
						<img v-if="item.isdelling" class="reducem" src="../img/delm.png">
						<img class="memberava" src="../img/avatar.jpg">
						<p>{{item.memberid}}</p>
					</div>
				</div>
				<div class="aline"></div>
				<!-- <van-button class="sendmsg" type="default">
					<div class="sendmsg_leftbox">
						<span>修改密码</span>
					</div>
					<img class="more" src="../img/more.png">
				</van-button> -->			
				<van-button v-if="isgroupowner" class="sendmsg delbox" type="default" @click="jiesangroup">
					<div class="sendmsg_leftbox">
						<span>解散该群</span>
					</div>
				</van-button>
				<van-button v-if="!isgroupowner" class="sendmsg delbox" type="default">
					<div class="sendmsg_leftbox">
						<span>删除并退出</span>
					</div>
				</van-button>
			</div>
			<van-popup class="addpopbox" v-model="showpop" position="bottom" round closeable>
				<p class="poptit">选择好友</p>
				<div class="friendbox">
					<van-button 
					class="chatlistbox" 
					type="default" 
					v-if="showmemberList.length>0"
					v-for="(item,index) in showmemberList"
					:key="index"
					@click="choseitem(index)"
					>
						<img v-if="!item.chose" class="chosecir" src="../img/nochoseg.png">
						<img v-if="item.chose" class="chosecir" src="../img/choseg.png">
						<img class="avatar" src="../img/avatar.jpg">
						<div class="chatlist_rightbox">
							<div class="chatlistmidbox">
								<p class="chatname">{{item.name}}</p>
							</div>
						</div>
					</van-button>	
					<p v-if="showmemberList.length==0" style="color: #999;text-align: center;font-size: .38rem;">好友都已入群~</p>
				</div>
				<div class="addfbtn">
					<van-button :disabled="!clearicon" type="primary" @click="addtogroup">确定({{begrouparr.length}})</van-button>
				</div>
			</van-popup>
		</div>
	</body>
</html>
<script type="text/javascript">
var webvue = new Vue({
	el: '#bigbox',
	data() {
		return {
			detail:'',
			setmemberList:[],
			groupowner:[],
			friendList:[],
			addmemberList:[],//群成员的列表
			showmemberList:[],//添加好友入群的列表
			isgroupowner:false,//是否是管理员
			name:getStorage('myid'),
			// isdelling:false,//显示删除符号
			delmes:'删除',
			showpop:false,
			begrouparr:[],//选中的好友
			clearicon:false,
			bigboxshow:false,
		} 
	},
	watch:{
		begrouparr:{
			handler(){
				if(this.begrouparr.length>0){
					this.clearicon = true;
				}else{
					this.clearicon = false;
				}
			}
		}
	},
	mounted(){
		if(getStorage('pagedata')){
			this.detail = getStorage('pagedata');
			saveStorage('pagedata','')
		}
		isfirst = 9;
		relogin();
		setTimeout(()=>{
			this.bigboxshow = true;
		},500)
	},
	methods:{
		back(){
			window.location.href = 'groupbook.html';
			// window.history.go(-1)
		},
		gourl(url){
			window.location.href = url;
		},
		delmember(){
			if(this.isdelling){
				this.setmemberList.forEach((item)=>{
					item.isdelling = false;
				})
				this.delmes = '删除';
			}else{
				this.setmemberList.forEach((item)=>{
					item.isdelling = true;
					if(item.memberid == this.name){
						item.isdelling = false;
					}
				})
				this.delmes = '取消删除';
			}
		},
		memberfunc(item){
			var that = this;
			if(item.isdelling){
				//删除群成员
				var option = {
				    groupId: this.detail.groupid,                        
				    username: item.memberid,                         // 群组成员名称
				    success: function () {
						vant.Toast.success('操作成功')
						that.setmemberList.forEach((item)=>{
							item.isdelling = false;
						})
						that.delmes = '删除';
						that.getmember()
				    }
				};
				conn.removeSingleGroupMember(option);
			}
		},
		aa(){
			console.log(this.addmemberList)
		},
		getmember(){
			var that = this;
			that.setmemberList = [];
			that.addmemberList = [];
			var pageNum = 1,
			    pageSize = 1000;
			    var options = {
			        pageNum: pageNum,                                               // 页码
			        pageSize: pageSize,                                             // 预期每页获取的记录数
			        groupId: this.detail.groupid,      
					// groupId:'120462461960193',
			        success: function (res) { 
						res.data.forEach((item,index)=>{
							if(item.member){
								var obj = {
									memberid:item.member,
									chose:false,
									isdelling:false
								}
								that.addmemberList.push(obj)
								console.log(that.addmemberList)
								that.setmemberList.push(obj)
							}
							if(item.owner){
								that.groupowner = {
									memberid:item.owner,
									isdelling:false
								};
							}						
						})
						if(that.name == that.groupowner.memberid){
							console.log('管理员')
							that.isgroupowner = true;
						}
						that.setmemberList.unshift(that.groupowner)
					},
			        error: function(e){}
			    };
			conn.listGroupMember(options);
		},
		getFriends(){
			var that = this;
			var aa = [];
			this.showmemberList = [];
			console.log(this.addmemberList)
			conn.getRoster({
			  success: function ( roster ) {
				  console.log(roster)
				  var memberarr = [];
				  console.log(that.addmemberList)
				  roster.forEach((item,index)=>{
					  var obj = {
						  chose:false,
						  name:item.name
					  }
					  aa.push(obj);
				  })
				  that.addmemberList.forEach((item)=>{
					  memberarr.push(item.memberid)
				  })
				  aa.forEach((item,index)=>{
					  if(memberarr.indexOf(item.name) == -1){
						  that.showmemberList.push(item)
						  console.log(that.showmemberList)
					  }
				  })			  
			  },    
			});
		},
		addmemfunc(){
			this.showpop = true;
			this.getFriends()
		},
		choseitem(index){
			if(this.showmemberList[index].chose){
				this.showmemberList[index].chose = false;
				var itemindex = this.begrouparr.findIndex((item=>item == this.showmemberList[index].name));
				this.begrouparr.splice(itemindex,1)
			}else{
				this.showmemberList[index].chose = true;
				if(this.begrouparr.indexOf(this.showmemberList[index].name)==-1){
					this.begrouparr.push(this.showmemberList[index].name)
				}
			}
			console.log(this.begrouparr)
		},
		addtogroup(){
			var option = {
				users: this.begrouparr,
				groupId: this.detail.groupid,    
			};
			conn.inviteToGroup(option);
			this.getmember()
			this.showpop = false;
		},
		//管理员解散群
		jiesangroup(){
			vant.Dialog.confirm({
				title: '提示',
				message: '确定要解散该群吗？',
			})
			.then(() => {
				// on confirm
				var option = {
					groupId: this.detail.groupid,   
					success: function () {
						vant.Toast.success('解散成功')
						window.location.href = 'groupbook.html'
					}
				};
				conn.dissolveGroup(option);
			})
			.catch(() => {
				// on cancel

			});
		}
	}
})
</script>